<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<meta http-equiv="X-UA-Compatible" content="ie=edge" />
		<title>单y页j设p计</title>
	</head>
	<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
	<link rel="stylesheet" type="text/css" href="css/style.css" />
	<body>
		<nav id="topNav" class="navbar navbar-default navbar-fixed-top">
			<div class="container-fluid">
				<div class="navbar-header">
					<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-navbar">
                    <span class="sr-only"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
					<a class="navbar-brand page-scroll" href="#first"><i class="glyphicon glyphicon-leaf"></i>着陆零</a>
				</div>
				<div class="navbar-collapse collapse" id="bs-navbar">
					<ul class="nav navbar-nav">
						<li>
							<a class="page-scroll" href="#one">介绍</a>
						</li>
						<li>
							<a class="page-scroll" href="#two">强调</a>
						</li>
						<li>
							<a class="page-scroll" href="#three">画廊</a>
						</li>
						<li>
							<a class="page-scroll" href="#four">特征</a>
						</li>
						<li>
							<a class="page-scroll" href="#last">联系</a>
						</li>
					</ul>
					<ul class="nav navbar-nav navbar-right">
						<li>
							<a class="page-scroll" title="关于我门的更详细信息" href="#db">关于</a>
						</li>
					</ul>
				</div>
			</div>
		</nav>

		<header id="first">
			<div class="header-content col-lg-12">
				<div class="inner">
					<!--Simple, One Page Design-->
					<h1 class="cursive">简单的单页设计</h1>
					<h4>这是一个简介的着陆页主题</h4>
					<hr>
					<a href="#one" class="btn btn-default btn-xl page-scroll">开始</a>
				</div>
			</div>

		</header>

		<section class="bg-primary" id="one">
			<div class="container">
				<div class="row">
					<div class="col-lg-6 col-lg-offset-3 col-md-8 col-md-offset-2 text-center">
						<h2 class="margin-top-0 text-primary">Bootstrap 简介</h2>
						<br>
						<p class="text-faded">
							Bootstrap是HTML、CSS和JS框架，用于开发响应式布局、移动设备优先的WEB项目。 可以自动适配任何设备，解决了响应式实现的繁琐问题，可以修改其中的各种样式，同样，其内部功能的强大包含了整个HTML，CSS，JS的各个方面。 通过Bootstrap制作的网站，极大地节省了代码，而且网页的整洁度有明显提高，熟练掌握使用可以更快更好的完成网站的制作。栅格系统是Bootstrap制作响应式的重要系统，通过使用栅格，可以快速的完成响应式
						</p>
						<!--<a href="#three" class="btn btn-default btn-xl page-scroll">学到更多</a>-->
						<button class="btn btn-default" data-toggle="modal" id="but" data-target="#tc">学到更多</button>
					</div>
				</div>
			</div>
		</section>

		<!--灵活的布局-->
		<section id="two">
			<div class="container">
				<div class="row">
					<div class="col-lg-12 text-center">
						<h2 class="margin-top-0 text-primary">灵活的布局</h2>
						<hr class="primary">
					</div>
				</div>
			</div>
			<div class="container">
				<div class="row">
					<div class="col-lg-4 col-md-4 text-center">
						<div class="feature er">
							<!--这是图片-->
							<div><img src="img/xu1.jpg" /></div>
							<h3>响应</h3>
							<p class="text-muted">你的网站无处不在</p>
						</div>
					</div>
					<div class="col-lg-4 col-md-4 text-center">
						<div class="feature er">
							<div><img src="img/xu2.jpg" /></div>
							<h3>制定</h3>
							<p class="text-muted">易于使用SASS进行主题和自定义</p>
						</div>
					</div>
					<div class="col-lg-4 col-md-4 text-center">
						<div class="feature er">
							<div><img src="img/xu3.jpg" /></div>
							<h3>一贯</h3>
							<p class="text-muted">一个成熟,测试良好,稳定的代码库</p>
						</div>
					</div>
				</div>
			</div>
		</section>

		<!--图片排版-->
		<section id="three" class="no-padding">
			<div class="container-fluid">
				<div class="row no-gutter">
					<div class="col-lg-4 col-sm-6 im">
						<a href="#galleryModal" class="gallery-box tup1" data-toggle="modal" data-target="#img1">
							<img class="img-responsive" src="assets/beach.jpg" />
							<div class="gallery-box-content">
								<!--gallery画廊  box盒 content居中-->
								<div class="tup2">
									<h1 class="glyphicon glyphicon-search"></h1>
								</div>

							</div>
						</a>
					</div>
					<div class="col-lg-4 col-sm-6 im">
						<a href="#galleryModal" class="gallery-box tup1" data-toggle="modal" data-target="#img1">
							<img class="img-responsive" src="assets/bike.jpg" />
							<div class="gallery-box-content">
								<!--gallery画廊  box盒 content居中-->
								<div class="tup2">
									<h1 class="glyphicon glyphicon-search"></h1>
								</div>

							</div>
						</a>						
					</div>
					<div class="col-lg-4 col-sm-6 im">
						<a href="#galleryModal" class="gallery-box tup1" data-toggle="modal" data-target="#img1">
							<img class="img-responsive" src="assets/city.jpg" />
							<div class="gallery-box-content">
								<!--gallery画廊  box盒 content居中-->
								<div class="tup2">
									<h1 class="glyphicon glyphicon-search"></h1>
								</div>

							</div>
						</a>						
					</div>
					<div class="col-lg-4 col-sm-6 im">
						<a href="#galleryModal" class="gallery-box tup1" data-toggle="modal" data-target="#img1">
							<img class="img-responsive" src="assets/colors.jpg" />
							<div class="gallery-box-content">
								<!--gallery画廊  box盒 content居中-->
								<div class="tup2">
									<h1 class="glyphicon glyphicon-search"></h1>
								</div>

							</div>
						</a>						
					</div>
					<div class="col-lg-4 col-sm-6 im">
						<a href="#galleryModal" class="gallery-box tup1" data-toggle="modal" data-target="#img1">
							<img class="img-responsive" src="assets/deer.jpg" />
							<div class="gallery-box-content">
								<!--gallery画廊  box盒 content居中-->
								<div class="tup2">
									<h1 class="glyphicon glyphicon-search"></h1>
								</div>

							</div>
						</a>						
					</div>
					<div class="col-lg-4 col-sm-6 im">
						<a href="#galleryModal" class="gallery-box tup1" data-toggle="modal" data-target="#img1">
							<img class="img-responsive" src="assets/lake.jpg" />
							<div class="gallery-box-content">
								<!--gallery画廊  box盒 content居中-->
								<div class="tup2">
									<h1 class="glyphicon glyphicon-search"></h1>
								</div>

							</div>
						</a>						
					</div>
				</div>
			</div>
			</div>
		</section>

		<div class="modal" id="img1">
			<div class="modal-dialog">
				<div class="modal-content">
					<!--头部-->
					<!--<div class="modal-header">
				
			</div>-->
					<!--内容-->
					<div class="modal-body">
						<div id="myCarousel" class="carousel slide" style="margin-top: 55px;">
							<!-- 轮播（Carousel）指标 -->
							<!--<ol class="carousel-indicators">
			<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
			<li data-target="#myCarousel" data-slide-to="1"></li>
			<li data-target="#myCarousel" data-slide-to="2"></li>
		</ol> -->
							<!-- 轮播（Carousel）项目 -->
							<div class="carousel-inner">
								<div class="item active">
									<img src="assets/beach.jpg" alt="First slide">
									<div class="carousel-caption">人离请熄火</div>
								</div>
								<div class="item">
									<img src="assets/bike.jpg" alt="Second slide">
									<div class="carousel-caption">视觉效果</div>
								</div>
								<div class="item">
									<img src="assets/city.jpg" alt="Third slide">
									<div class="carousel-caption">我们一起红灯碰瓷</div>
								</div>
								<div class="item">
									<img src="assets/colors.jpg" alt="Third slide">
									<div class="carousel-caption">热的外面都没人</div>
								</div>
								<div class="item">
									<img src="assets/deer.jpg" alt="Third slide">
									<div class="carousel-caption">小鹿吃枯草</div>
								</div>
								<div class="item">
									<img src="assets/lake.jpg" alt="Third slide">
									<div class="carousel-caption">山美云美水更美</div>
								</div>
							</div>
							<!-- 轮播（Carousel）导航 -->
							<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
								<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
								<span class="sr-only">Previous</span>
							</a>
							<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
								<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
								<span class="sr-only">Next</span>
							</a>
						</div>
					</div>
					<!--尾部-->
					<div class="modal-footer">
						<center><button type="button" class="btn btn-primary" data-dismiss="modal"><span>close&times;</span></button></center>
					</div>
				</div>
			</div>
		</div>
		
		
		
		<!--特征-->
		<section class="container" id="four">
			<div class="row">
				<div class="col-xs-12 col-sm-6 col-sm-offset-3 col-md-4 col-md-offset-4">
					<!--小屏幕偏移3格 中屏幕偏移4格 col-sm-offset-3 col-md-offset-4-->
					<h2 class="text-center text-primary">特征</h2>
					<hr>
						<div class="container-fluid tx">
							<h3>简单</h3><h1 class="glyphicon glyphicon-sunglasses pull-right"></h1>
							<p>有什么更容易?使用本页面者主题快速入门。</p>
						</div>
						<hr>
						<div class="container-fluid tx">
							<h3>自由</h3><h1 class="glyphicon glyphicon-send pull-left"></h1>
							<p>是的,这是能做出令人敬畏的东西。</p>
						</div>
						<hr>
						<div class="container-fluid tx">
							<h3>独特</h3><h1 class="glyphicon glyphicon-thumbs-up pull-right"></h1>
							<p>Bootstrap做出来的网站更好看,布局更轻松,class一步搞定。</p>
						</div>
						<hr>
						<div class="container-fluid tx">
							<h3>流行</h3><h1 class="glyphicon glyphicon-fire pull-left"></h1>
							<p>Bootstrap是世界上使用最多的前端框架的原因有好多的理由。</p>
						</div>
						<hr>
						<div class="container-fluid tx">
							<h3>经测试</h3><h1 class="glyphicon glyphicon-floppy-saved pull-right"></h1>
							<p>Bootstrap已经成熟并经过了充分测试。这是一个稳定的代码库,可以提供一致性。</p>
						</div>
					
					
				
				</div>
			</div>
		</section>
		
		<!--保持联系-->
		<section id="last">
			<div class="container">
				<div class="row">
					<div class="col-lg-8 col-lg-offset-2 text-center">
						<h2 class="">保持联系</h2>
						<hr>
						<p class="lovefk">我们喜欢反馈。填写下面的表格,我会尽快回复你</p>
					</div>
					<div class="col-lg-10 col-lg-offset-1 text-center">
						<form class="contact-form row">
							<div class="col-md-4">
								<label></label>
								<input type="text" class="form-control" placeholder="姓名">
							</div>
							<div class="col-md-4">
								<label></label>
								<input type="text" class="form-control" placeholder="邮箱">
							</div>
							<div class="col-md-4">
								<label></label>
								<input type="text" class="form-control" placeholder="电话">
							</div>
							<div class="col-md-12">
								<label></label>
								<textarea class="form-control" rows="9" placeholder="反馈信息内容..."></textarea>
							</div>
							<div class="col-md-4 col-md-offset-4">
								<label></label>
								<button type="button" data-toggle="modal" data-target="#tc" class="btn btn-primary btn-block btn-lg">发送 <i class="ion-android-arrow-forward"></i></button>
							</div>
						</form>
					</div>
				</div>
			</div>
		</section>
		
		
		<footer id="footer">
			<div class="container-fluid">
				<div class="row">
					<div class="col-xs-6 col-sm-3 column">
						<h4>信息</h4>
						<ul class="list-unstyled">
							<li>
								<a href="">制品</a>
							</li>
							<li>
								<a href="">服务</a>
							</li>
							<li>
								<a href="">优点</a>
							</li>
							<li>
								<a href="">开发商</a>
							</li>
						</ul>
					</div>
					<div class="col-xs-6 col-sm-3 column">
						<h4>关于</h4>
						<ul class="list-unstyled">
							<li>
								<a href="#">联系我们</a>
							</li>
							<li>
								<a href="#">配送信息</a>
							</li>
							<li>
								<a href="#">隐私政策</a>
							</li>
							<li>
								<a href="#">条款和条件</a>
							</li>
						</ul>
					</div>
					<div class="col-xs-12 col-sm-3 column">
						<h4>保持发布</h4>
						<form>
							<div class="form-group">
								<input type="text" class="form-control" title="发布吗" placeholder="联系QQ:1036717576">
							</div>
							<div class="form-group">
								<button class="btn btn-primary" data-toggle="modal" data-target="#tc" type="button">订阅更新</button>
							</div>
						</form>
					</div>
					<div class="col-xs-12 col-sm-3 text-right">
						<h4>跟随</h4>
						<ul class="list-inline">
							<li>
								<a href="" title="这是一个字体图标"><h1 class="glyphicon glyphicon-globe"></h1></a>&nbsp;</li>
							<li>
								<a href="" title="这是一个字体图标"><h1 class="glyphicon glyphicon-link"></h1></a>&nbsp;</li>
							<li>
								<a href="" title="这是一个字体图标"><h1 class="glyphicon glyphicon-qrcode"></h1></a>
							</li>
						</ul>
					</div>
				</div>
				<br/>
				<span class="pull-right text-muted small">&nbsp;&nbsp;&nbsp;<a href="app/yujinpeng.apk" download="yujinpeng.apk" target="_blank" title="QQ:1036717576">安卓版本app</a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="app/yujinpeng.ipa" download="yujinpeng.ipa" title="可以搜索" target="_blank">下载ipa版本app</a></span>
			</div>
		</footer>
			
			<!--弹窗效果1-->
	<div class="modal" id="tc">
		<div class="modal-dialog">
			<div class="modal-content">
				<!--头部-->
				<!--不需要-->
				
				<!--内容-->
				<div class="modal-body">
					<h1>不错的工作!</h1>
					<p>你点击了按钮,但他并没有真正去的地方,因为这只是一个现实。</p>
					<p></p>
					<p><a href="" data-toggle="modal" data-target="#tc2">通过BootstrapZero 了解更多信息</a></p>
				</div>
				<!--尾部-->
				<div class="modal-footer">
					<center><button type="button" class="btn btn-primary" data-dismiss="modal"><span>知道了</span></button></center>
				</div>
			</div>
		</div>
	</div>
	
		
		
	<!--弹窗效果2-->
	<div class="modal" id="tc2">
		<div class="modal-dialog">
			<div class="modal-content">
				<!--头部-->
				<!--不需要-->
				
				<!--内容-->
				<div class="modal-body">
					<h1>单页主题</h1>
					<h6>由BootstropZero构建的免费,响应的主题。</h6>
					<p>这是一个单页Bootstrap模板,带有圆滑的简约配色方案,强调色彩和平滑滚动。有垂直的内容部分微妙的动画,使用JQuery WOW插件滚动到视图时被激活。还有一个模板的画廊,可以很好的展示您的工作组合。其他功能还包括联系,图片查看,多列页脚,和很好的布局适用手机。</p>
				</div>
				<!--尾部-->
				<div class="modal-footer">
					<center><button type="button" class="btn btn-primary" data-dismiss="modal"><span>我以成功了解</span></button></center>
				</div>
			</div>
		</div>
	</div>
			<!--连接到底部-->
			<div id="db"></div>
			
		<script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/my.js" type="text/javascript" charset="utf-8"></script>
	</body>

</html>